<template>
    <div class="dooya-container" style="min-width: 1100px;overflow:scroll;">
        <Card>
 
            <Form ref="formModalDataRole" :model="modalDataRole" :rules="formModalRule"  >
                    
                    
                <div style="height:40px;margin-bottom: 0px; display:flex;justify-content:end; ">
                    <FormItem>
                        <Button style="height:30px;" type="primary" icon="md-checkmark"  @click="handleSubmit('formModalDataRole')">确认</Button>

                        <Button  to="/inneruser/usergrouplist"  @click="handleto()"  style="margin-left: 10px;height:30px;" type="success" icon="ios-undo">返回</Button>
                    </FormItem>
                </div>

                <hr> 
                <br/>

                <span>用户组名称：</span>

                <FormItem label="" prop="role_name" >
                    <Input type="text" v-model.trim="modalDataRole.role_name"></Input>
                </FormItem>
                    

                <h2>权限配置：</h2>
                 <FormItem label="" prop="permissions">
                    <VueTreeToTable
                        ref="tableBody"
                        :origin-data="originData"
                        :table-columns="tableColumns"
                        show-checkbox
                        />
                 </FormItem>
           
            </Form>
           
        </Card>
   </div>
</template>

<script>
import VueTreeToTable from "vue-tree-to-table";
import { mapMutations } from "vuex";
import {
    toolTip,
    localSave,
    localRead,
    setTagNavListInLocalstorage
} from "@/libs/util";
import {
    getValueByKey, // 根据对象数组某个key的value，查询另一个key的value
    resultCallback // 根据请求的status执行回调函数
} from "@/libs/dataHanding";
// api
import {
    getPermissionsByRole, //根据角色id获取菜单权限
    editGroup, //编辑用户组
    addGroup, //添加用户组
    getMenuList // 获取菜单列表
} from "@/api/data";

export default {
    components: {
        VueTreeToTable
    },
    data() {
        return {
            originData: [],
            tableColumns: [],
            modalDataRole: {
                role_name: ""
            },
            formModalRule: {
                // 对应数据库里面的title
                role_name: [
                    {
                        required: true,
                        message: "请输入角色名称",
                        trigger: "change"
                    },
                    {
                        type: "string",
                        max: 20,
                        message: "角色名称过长",
                        trigger: "change"
                    }
                ]
            },
            modalDataRoleType: "insert", // 类型：insert/edit

            groupData: []
        };
    },

    async created() {
        this.tableColumns = [
            [
                {
                    id: "head1",
                    nodeName: "一级菜单",
                    rowSpan: 2,
                    colSpan: 1
                },
                {
                    id: "head2",
                    nodeName: "二级菜单",
                    rowSpan: 2,
                    colSpan: 1
                },
                {
                    id: "head3",
                    nodeName: "三级菜单",
                    rowSpan: 1,
                    colSpan: 1
                },
                {
                    id: "head4",
                    nodeName: "四级菜单",
                    rowSpan: 1,
                    colSpan: 1
                }
            ]
        ];

        //获取所有菜单和按钮多选框
        this.originData = (await getMenuList({ menu_type: 3 })).data.data || [];
        console.log("this.originData:", this.originData);

        //修改选中
        if (this.$route.params.id) {
            this.modalDataRole = this.$route.params;
            console.log("this.$route.params:", this.$route.params);
            this.modalDataRoleType = "edit";

            //获取组的权限
            let permissions =
                (await getPermissionsByRole({
                    role_id: this.$route.params.id
                })).data.data || [];

            console.log("permissions:", permissions);

            permissions.forEach((elem, index) => {
                //text 必须是string 类型
                let text = elem.toString();
                this.$refs.tableBody.changeNodeValue(text, "isChecked", true);
            });
        }
    },
    mounted() {},
    methods: {
        //返回功能关闭页签
        handleto() {
            //返回的时候关闭当前标签页
            this.$store.state.app.tagNavList = this.$store.state.app.tagNavList.filter(
                item => {
                    return item.name != "innergroupedit";
                }
            );
        },

        // 提交表单 - 角色
        handleSubmit() {
            console.log("------");
            this.$refs.formModalDataRole.validate(async valid => {
                if (valid) {
                    //this.buttonLoading = true;
                    let checkedObj = this.$refs.tableBody.getCheckedNodeList();
                    let checkedArr = [];
                    checkedObj.forEach((item, index) => {
                        if (item.isChecked) {
                            checkedArr.push(item.id);
                        }
                    });
                    console.log("checkedArr", checkedArr);
                    let paramData = this.modalDataRole;
                    if (checkedArr) {
                        paramData.permissions = checkedArr.join(",");
                    } else {
                        paramData.permissions = "";
                    }

                    switch (this.modalDataRoleType) {
                        case "insert":
                            console.log("insert----");
                            console.log("----paramData--", paramData);

                            let res_add = await addGroup(paramData);

                            if (res_add.data.code != 0) {
                                //axios.js 已经截取了错误信息，这里不需要提示了。
                            } else {
                                resultCallback(200, "添加成功！", () => {
                                    this.$router.push({
                                        name: "usergrouplist"
                                    });
                                    this.handleto();
                                });
                            }

                            console.log("---res_add--:", res_add);

                            break;

                        case "edit":
                            paramData.role_id = this.$route.params.id;
                            console.log("---edit-paramData-:", paramData);
                            let res_edit = await editGroup(paramData);

                            if (res_edit.data.code != 0) {
                                //axios.js 已经截取了错误信息，这里不需要提示了。
                            } else {
                                resultCallback(200, "编辑成功！", () => {
                                    this.$router.push({
                                        name: "usergrouplist"
                                    });
                                    this.handleto();
                                });
                            }

                            break;
                    }
                }
            });
        },

        handleReset(name) {
            this.$refs[name].resetFields();
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
